<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            font-size: 50px;
        }
    </style>
</head>
<body>

<!--
        javaScript   核心内容包含哪些模块
        1.ECMASCRIPT     js基础语法
        2.dom       文档对象模型
        3.bom       浏览器对象模型

       dom  操作  获取文档中的节点对象
       document.getElementById()            根据id     一个节点对象
      document.getElementsByClassName()   class      以数组的形式返回节点对象
    document.getElementsByTagName()         tagName
    document.querySelector()                            一个节点对象
    document.querySelectorAll()                         以数组的形式返回节点对象
-->

<div id="app">

</div>

<hr>

<table border="1px" cellspacing="0" width="100%" id="tb">
    <tr>
        <th>ID</th>
        <th>name</th>
        <th>age</th>
    </tr>

<!--    jsp    声明式编程    layui  -->

<!--   <c:foreach items="${students}" var="student">-->
<!--        <tr>-->
<!--            <td>${student.id}</td>-->
<!--            <td>${student.name}</td>-->
<!--            <td>${student.age}</td>-->
<!--        </tr>-->
<!--   </c:foreach>-->

</table>

<script type="text/javascript">

    let element = document.getElementById("app");
    console.log(element)
    // 添加内容到节点对象中    innerText  无法识别html标签 会将标签识别成普通文本
    // element.innerText = "<h1>hello javascript</h1>"
    // element.innerHTML = "<h1>hello javascript</h1>"
    // 获取节点对象中的值
    // console.log(element.innerText)
    // console.log(element.innerHTML)

    // 父子节点的操作 <h1></h1>
    let h1Element = document.createElement("h1");
    h1Element.innerText="hello javascript"
    element.appendChild(h1Element);

    //  css样式
    element.style.color="red"
    element.className="a"


    //  在表格中实现数据的渲染   jsp
    const  students = [
        {
            id:1,
            name:'tom',
            age:20
        },
        {
            id:2,
            name:'jack',
            age:21
        },
        {
            id:3,
            name:'xiaoming',
            age:20
        }
    ]

    let tb = document.getElementById("tb");

    students.forEach(student=>{
        //创建tr对象
        let tr = document.createElement("tr");
        // 遍历学生对象
        for (let studentKey in student) {
            // 创建td
            let td = document.createElement("td");
            td.innerText = student[studentKey]
            tr.appendChild(td);
        }

        // 将tr添加到tb
        tb.appendChild(tr)

    })



</script>


</body>
</html>
